<template>
  <view class="me-box">
    <view class="info ">
      <view class="member-code">
        <u-icon name="grid-fill" color="#886a3b" size="28" />
        <text class="ml-10" @click="openQuCode">会员码</text>
      </view>
      <view class="avatar-box mb-30">
        <u-avatar size="100" :src="infoImgUrl"></u-avatar>
        <view class="info-box">
          <view>
            <text class="nameShow">{{admin}}</text>
          </view>
          <view class="houseShow" @click="changeHouse">{{boundHouse}}<u-icon name="arrow-right" /></view>

        </view>
      </view>

      <u-row gutter="12" class="row-box">
        <u-col span="4" @click="openMyIntegral">
          <view class="num">0</view>
          <view class="text">积分</view>
        </u-col>
        <u-col span="4" @click="openMyBalance">
          <view class="col-2">
            <view class="num">0.00</view>
            <view class="text">余额</view>
          </view>
        </u-col>
        <u-col span="4" @click="openMyCardCoupon">
          <view class="num">0</view>
          <view class="text">卡卷</view>
        </u-col>
      </u-row>
    </view>

    <view class="card-box">
      <u-card>
        <view class="slot-head" slot="head">
          <view class="u-head-item-title" :class="{'active-head':acIndex==0}" @click="openActive(0)">我的车辆</view>
          <view class="u-head-item-title" :class="{'active-head':acIndex==1}" @click="openActive(1)">我的车位</view>
          <view class="u-head-item-title" @click="openSkip">更多</view>
        </view>
        <view slot="body" class="card-body">
          <view class="u-body-item" v-if="acIndex==0">
            <view class="u-body-item-title ">您还没有添加&nbsp;~</view>
            <view class="">
              畅通无阻
            </view>
          </view>
          <view class="u-body-item" v-else>
            <view class="u-body-item-title ">暂无车位&nbsp;~</view>
            <view class="">
              人住其居，车入其位
            </view>
          </view>
          <view class="po-right"></view>
        </view>
      </u-card>
    </view>

    <view class="card-box">
      <u-card>
        <view class="slot-head" slot="head">
          <view class="u-head-item-title">更多工具</view>
        </view>
        <view slot="body">
          <view class="u-body-item">
            <u-grid :col="4" :border="false">
              <u-grid-item v-for="(item,index) in toolList" :key=index @click="openTool(item)">
                <u-icon :name="item.icon" :size="46"></u-icon>
                <view class="grid-text">{{item.text}}</view>
              </u-grid-item>
            </u-grid>
          </view>
        </view>
      </u-card>
    </view>

    <u-button class="present mt-30" :hair-line="false" @click="loginOUt">退出登录</u-button>
    <view class="present mt-40">
      当前用户：{{CurrentPhone}}
    </view>
  </view>
</template>

<script>
  import {
    loginOutApi
  } from '@/api/loginOutApi.js'
  import {
    mapGetters
  } from 'vuex';
  import {
    detailInfoApi
  } from '@/api/base/getPropDetail.js'
  // import {
  //   data
  // } from '../../components/uview-ui/libs/mixin/mixin';

  export default {
    data() {
      return {
        selectRoom:[],
        boundHouse: '',
        admin: '',
        CurrentPhone: '',
        backData: [],
        toolList: [{
            text: "家庭授权",
            icon: "lock-open"
          },
          {
            text: "门禁管理",
            icon: "order"
          },
          {
            text: "会员同步",
            icon: "integral"
          },
          {
            text: "积分商城",
            icon: "calendar-fill"
          },
          {
            text: "人脸管理",
            icon: "level"
          },

          {
            text: "远程开门",
            icon: "list-dot"
          },
          {
            text: "关于我们",
            icon: "account"
          }
        ],
        infoImgUrl: "https://picsum.photos/200",
        acIndex: 0
      }
    },


    mounted() {
      //参数本地缓存中的指定的 key通过赋值给一个变量获取
      const userInfo = JSON.parse(uni.getStorageSync('store_user_info'));
      console.log(userInfo.value.account);
      console.log(userInfo.value.name)
      this.admin = userInfo.value.name
      this.CurrentPhone = userInfo.value.account

      this.getDetailInfo() //调用查看绑定房屋接口
    },

    computed: {
      ...mapGetters(['user_info']),
    },
    
    onLoad() {
      //监听房屋信息切换页面返回的房产数据
      uni.$on('houseId', (data) => {
        console.log(data,'房屋信息');
        this.boundHouse = data
      });
    },

    methods: {
      //房产切换跳转
      changeHouse() {
        uni.navigateTo({
          url: '/subPack/myHouse/myHouse'
        })
      },

      //判断是否绑定房产信息如果未绑定就显示“绑定房产”，如果已绑定就显示绑定的房产名
      getDetailInfo() {
        const id = this.user_info.id;
        console.log(id, '用户ID')
        detailInfoApi({
          id
        }).then(respond => {
          if (respond.roomInfo == '') {
            this.boundHouse = '绑定房屋'
          } else {
            this.boundHouse = respond.roomInfo
          }
          console.log(respond, '获取的房屋信息');
        })
      },

      //退出登录
      loginOUt() {
        uni.showModal({
          title: '提示',
          content: '确定要退出吗？',
          success: function(res) {
            if (res.confirm) {
              loginOutApi()
                .then(response => {
                  console.log(response);
                  uni.reLaunch({
                    url: 'pages/login/login'
                  })
                })
              console.log("点击了确定")
            } else if (res.cancel) {
              console.log("点击了取消")
            }
          }
        })
      },
      openActive(e) {
        this.acIndex = e
      },
      openMyIntegral() {
        uni.navigateTo({
          url: '/subPack/myIntegral'
        })
      },
      openMyBalance() {
        uni.navigateTo({
          url: '/subPack/myBalance'
        })
      },
      openMyCardCoupon() {
        uni.navigateTo({
          url: '/subPack/myCardCoupon'
        })
      },
      openQuCode() {
        uni.navigateTo({
          url: '/subPack/qrCode'
        })
      },
      openTool(item) {
        switch (item.text) {
          case '家庭授权':
            uni.navigateTo({
              url: '/subPack/familyAuthorization'
            })
            break;
          case '门禁管理':
            uni.navigateTo({
              url: '/subPack/accessControl'
            })
            break;
          case '关于我们':
            uni.navigateTo({
              url: '/subPack/aboutUs'
            })
            break;
          case '人脸管理':
            uni.navigateTo({
              url: '/subPack/faceManagement'
            })
            break;
          default:
            break;
        }
      },
      openSkip() {
        uni.navigateTo({
          url: '/subPack/myCar'
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .me-box {
    padding: 0 20rpx;

    .info {
      position: relative;
      background-color: $-color-muted+95;
      padding: 30rpx 0 30rpx 20rpx;
      background: url('https://oss.hntenghu.com/wuye/002.png') no-repeat;
      background-size: 100% 100%;

      .member-code {
        position: absolute;
        top: 30rpx;
        right: 0rpx;
        background-color: #e7e7e7;
        border-radius: 50rpx;
        text-align: center;
        padding: 7rpx 20rpx;
      }

      .info-box {
        margin-left: 10rpx;
      }

      .nameShow {
        display: block;
        float: left;
      }

      .houseShow {
        float: left;
        font-size: 20rpx;
        color: $-color-muted;
      }

      .text {
        color: $-color-muted;
        text-align: center;
      }

      .num {
        text-align: center;
        margin-bottom: 10rpx;
      }

      .avatar-box {
        display: flex;
        align-items: center;

        >text {
          font-weight: 700;
        }

        /deep/.u-avatar {
          border: 2px solid #d3b375;
        }
      }

      .col-2 {
        position: relative;

        &::after {
          content: "";
          position: absolute;
          width: 1px;
          height: 60%;
          background-color: gray;
          top: 50%;
          transform: translateY(-50%);
          left: -10rpx;
          background-color: $-color-muted;
        }

        &::before {
          content: "";
          position: absolute;
          width: 1px;
          height: 60%;
          background-color: gray;
          top: 50%;
          transform: translateY(-50%);
          right: -10px;
          background-color: $-color-muted;
        }
      }
    }

    .card-box {
      /deep/.u-card {
        margin: 20rpx 0 !important;
      }

      .slot-head {
        display: flex;
        justify-content: space-between;
        color: $-color-muted;
      }

      .active-head {
        color: #000;
        font-weight: 700;
      }

      /deep/.u-card__body {
        position: relative;

        .po-right {
          position: absolute;
          right: 20rpx;
          width: 222rpx;
          height: 160rpx;
          top: 0;
          background: url('https://oss.hntenghu.com/wuye/003.png') no-repeat;
          background-size: 100% 100%;
        }
      }

      .u-body-item {
        line-height: 55rpx;

        .u-body-item-title {
          font-weight: 700;
          font-size: 32rpx;
          color: #000;
        }
      }
    }

    .present {
      color: $-color-muted;
      text-align: center;
    }
  }
</style>